<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../xiaomiTwo/css/mi.css">
  <link rel="stylesheet" href="../xiaomiTwo/css/reset.css">
</head>

<body>
  <div class="header">
    <div class="content">
      <div class="content-left">
        <ul>
          <li><a href="#">小米官网</a><span class="sep">|</span></li>
          <li><a href="#">小米商城</a><span class="sep">|</span></li>
          <li><a href="#">小米澎湃OS</a><span class="sep">|</span></li>
          <li><a href="#">小米汽车</a><span class="sep">|</span></li>
          <li><a href="#">云服务</a><span class="sep">|</span></li>
          <li><a href="#">IoT</a><span class="sep">|</span></li>
          <li><a href="#">有品</a><span class="sep">|</span></li>
          <li><a href="#">小爱开放平台</a><span class="sep">|</span></li>
          <li><a href="#">资质证照</a><span class="sep">|</span></li>
          <li><a href="#">协议规则</a><span class="sep">|</span></li>
          <li><a href="#">下载app</a><span class="sep">|</span></li>
          <li><a href="#">Select Location</a></li>
        </ul>
      </div>
      <div class="content-right">
        <ul>
          <li><a href="#">登录</a><span class="sep">|</span></li>
          <li><a href="#">注册</a><span class="sep">|</span></li>
          <li><a href="#">消息通知</a></li>
          <li class="cart">
            <a href="#">
              <i>购物车（0）</i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="site-header">
    <div class="container">
      <div class="header-logo">
        <img src="../xiaomiTwo/imgs/milogo.png" alt="">
      </div>
      <div class="header-nav">
        <ul>
          <li><a href="#">Xiaomi手机</a></li>
          <li><a href="#">REDMI手机</a></li>
          <li><a href="#">电视</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">平板</a></li>
          <li><a href="#">家电</a></li>
          <li><a href="#">路由器</a></li>
          <li><a href="#">服务中心</a></li>
          <li><a href="#">社区</a></li>
        </ul>
      </div>
      <div class="header-search">
        <form action="#">
          <input type="text" placeholder="请输入商品名称" list="search-suggestions">
          <datalist class="datalist1" id="search-suggestions">
            <option value="小米手机">
            <option value="Redmi手机">
            <option value="小米电视">
            <option value="小米笔记本">
            <option value="小米手环">
          </datalist>
          <button type="submit">搜索</button>
        </form>
      </div>
    </div>
  </div>
  <div class="home-hero-container">
    <div class="container">
      <div class="container-left">
        <ul>
          <li>
            <a href="#">手机</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi电视1</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi电视2</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">电视</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 电视系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">家电</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 家电系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">笔记本 平板 显示器</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 笔记本 平板 显示器系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">出行 穿戴</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 出行 穿戴系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">耳机 音响</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 耳机 音响系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">健康 儿童</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 健康 儿童系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">生活 箱包</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 生活 箱包系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">智能 路由器</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 智能 路由器系列1</span>
                  </a>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 智能 路由器系列2</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">电源 配件</a><span class="iphone">></span>
            <div class="children">
              <ul>
                <li>
                  <a href="#">
                    <img src="./imgs/Flip.webp" alt="">
                    <span>Xiaomi 电源 配件系列</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="container-right">

      </div>
    </div>
  </div>
</body>

</html>